<template>
  <div>
    <van-nav-bar safe-area-inset-top placeholder :title="$t('siteList')" left-arrow fixed @click-left="onClickLeft" />

    <van-list v-model="loading" :finished="finished" :loading-text="$t('Loading')" :finished-text="$t('noMore')" :error.sync="error" :error-text="$t('errorAndReload')" @load="onLoad">
      <div class="margin">
          <div class="siteBox" v-for="(site,i) in siteArr" :key="i">
          <div class="siteTitBox">
            <div class="siteTit_l">{{site.siteName}}</div>
          </div>
          <div class="siteContentBox" @click="goSiteDetail(site.ids,site.siteName)">
            <div class="siteContentList">
              <div class="siteContentList_l">{{$t('LoginAccount')}}</div>
              <div class="siteContentList_r">{{site.loginName}}</div>
            </div>
            <div class="siteContentList">
              <div class="siteContentList_l">{{$t('PanelSize')}}</div>
              <div class="siteContentList_r">{{site.capacity | numFilter(2,'kW')}}</div>
            </div>
            <div class="siteContentList">
              <div class="siteContentList_l">{{$t('OnlineInverters')}}</div>
              <div class="siteContentList_r">{{site.inverterInlineNum}}</div>
            </div>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
export default {
  data(){
    return {
      loading: false,
      finished: false,
      siteArr:[],
      current:1,
      error:false
    }
  },
  methods: {
    onClickLeft(){
      this.$router.push({path:'/agentHome/user'});
    },
    goSiteDetail(siteId,siteName){
      localStorage.setItem('siteId',siteId);
      localStorage.setItem('siteName',siteName);
      this.$router.push({path:'/agentsitedetail'});
    },
    async getSiteList(){
      this.comm.loadingShow();
      let data=await this.API.siteList(localStorage.getItem('domain'),{'tokenId':localStorage.getItem('tokenId'),'userId':localStorage.getItem('userId'),'current':this.current,'size':10,'siteName':''});
      this.siteArr = this.siteArr.concat(data.result.rows);
      this.loading = false;
      if (data.result.rows==null||data.result.rows.length==0||data.result.rows.length<10) {
        this.finished=true;
      }else{
        this.finished = false;
      }
      this.current++;
    },
    onLoad(){
      this.getSiteList().catch(()=>{
        this.loading = false;
        this.error=true;
      });
    }
  }
}
</script>

<style scoped lang="less">
.van-hairline--bottom::after{
  border: none;
}
.margin{
  margin-top: 20px;
}
.siteBox{
  margin-top: 15px;
  width: 100%;
  background: #ffffff;
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}
.siteTitBox{
  width: 100%;
  height: 45px;
  border-bottom: 1px dotted #e2e2e2;
}
.siteTit_l{
  float: left;
  height: 45px;
  line-height: 45px;
  color: #595758;
  font-weight: bolder;
  font-size: 16px;
  margin-left: 15px;
 }
.siteTit_r{
  float: right;
  margin:10px 15px 0 0;
}
.siteTit_r img{
  width: 28px;
}
.siteContentBox{
 padding: 0 15px;
}
.siteContentList{
  height: 30px;
  line-height: 30px;
  width: 100%;
}
.siteContentList_l{
  float: left;
  color: #B6B6B6;
}
.siteContentList_r{
  float: right;
  color: #444444;
}
.van-search__action{
  color: #fff;
}
.van-search__action:active{
  background-color: #3B3D4E;
}
</style>
